<template>
    <div class="confirmOrder">
        <div class="header">
            <div class="left" @click="goBack">
                <img src="@/assets/images/pubilc/btn_back.png" alt="">
            </div>
            <div class="title">确认订单</div>
            <div class="right"></div>
        </div>
        <div class="orderInfo">
            <div class="shop">
                <van-image class="headImg" radius="50%" :src="shopInfo.head_img_url" alt>
                    <template v-slot:loading>
                        <img src="@/assets/images/goodsDetails/default_img.png" alt="">
                    </template>
                </van-image>
                <div>{{ shopInfo.nickname }}</div>
            </div>
            <div class="goodsInfo">
                <div class="left">
                    <van-image :src="orderData.picture" fit="cover" radius="4" width="2.4rem" height="2.4rem">
                        <template v-slot:loading>
                            <img src="@/assets/images/goodsDetails/serpeImg.png" alt="">
                        </template>
                    </van-image>
                </div>
                <div class="right">
                    <div class="decipher">
                        <!-- <img src="@/assets/images/pubilc/auto.png" alt=""> -->
                        <div class="dec_name">
                            <span class="tag">自动发货</span>
                            <span class="" style="line-height: 12px">{{ orderData.goods_name }}</span>
                        </div>
                        <div class="size">{{ orderData.spec_name }}</div>
                    </div>
                    <div class="price">
                        <span>￥</span>
                        <span>{{ orderData.after_discount_price }}</span>
                        <span>/件</span>
                    </div>
                </div>
            </div>
            <div class="ruleInfo">
                <div class="discounts" v-if="discount_type !== null">
                    <div class="left" v-if="discount_type.discount_type === 1"><img
                            src="@/assets/images/pubilc/redcut.png" alt=""> 满减优惠
                    </div>
                    <div class="left" v-if="discount_type.discount_type === 2"><img
                            src="@/assets/images/pubilc/redcut2.png" alt=""> 满送优惠
                    </div>
                    <div class="left" v-if="discount_type.discount_type === 3"><img
                            src="@/assets/images/pubilc/redcut1.png" alt=""> 满折优惠
                    </div>
                    <div class="right" @click="showDiscounts">
            <span v-if="discount_type.discount_type === 1">
              满{{ discount_type.condition_num}}{{discount_type.condition_type === 1 ? "元" : "件"}}{{ discount_type.condition_type === 1 ? '减' : '送 ' }}{{ discount_type.discount_value}}{{ discount_type.condition_type === 1 ? "元" : "件"}}
            </span>
                        <span v-if="discount_type.discount_type === 2">
              满{{ discount_type.condition_num }}{{ discount_type.condition_type === 1 ? "元": "件" }}送{{ discount_type.discount_value }}{{ discount_type.condition_type === 1 ? "元" : "件" }}
            </span>
                        <span v-if="discount_type.discount_type === 3">
              满{{ discount_type.condition_num }}{{ discount_type.condition_type === 1 ? "元" : "件" }}享{{ discount_type.discount_value }}折
            </span>
                        <!-- <span v-if="orderData.discount_type">满10件送2件</span> -->
                        <img src="@/assets/images/pubilc/right.png" alt/>
                    </div>
                </div>
                <div class="discounts">
                    <div class="left"><img src="@/assets/images/pubilc/redpic.png" alt="">红包优惠</div>
                    <div class="right" @click="goUsePacket" v-if="valid.length !== 0">
                        <div v-if="user_envelope_id !== -1" style="display: flex; align-items: center;">
                            <div>-￥</div>
                            <div class="dis_right">{{ orderData.envelope_reduce_price }}</div>
                        </div>
                        <div v-if="user_envelope_id == -1">
                            <div>{{ valid.length }}张可用</div>
                        </div>
                        <img src="@/assets/images/pubilc/right.png" alt/>
                    </div>
                    <div class="right" @click="goUsePacket" v-if="valid.length === 0">
                        <div>暂无可用</div>
                        <img src="@/assets/images/pubilc/right.png" alt/>
                    </div>
                </div>
                <div class="discounts" v-if="orderData.max_sale_num !== 0 ||	orderData.min_sale_num !== 0"
                     v-show="!loading">
                    <div class="left"><img src="@/assets/images/pubilc/buymax.png" alt="">限购</div>
                    <!-- <div class="right" @click="goUsePacket" v-if="valid.length !== 0">
                      <div v-if="user_envelope_id !== -1" style="display: flex; align-items: center;">
                        <div>-￥</div>
                        <div>{{ orderData.envelope_reduce_price }}</div>
                      </div>
                      <div v-if="user_envelope_id == -1">
                        <div>{{ valid.length }}张可用</div>
                      </div>
                      <img src="@/assets/images/pubilc/right.png" alt />
                    </div> -->
                    <div class="right" v-if="valid.length === 0">
                        <span v-if="orderData.min_sale_num !== 0">最低限购{{ orderData.min_sale_num }}件</span>
                        <span v-if="!(orderData.max_sale_num === 0) && !(orderData.min_sale_num === 0)">，</span>
                        <span v-if="orderData.max_sale_num !== 0">最高限购{{ orderData.max_sale_num }}件</span>
                    </div>
                </div>
                <!-- <div class="discounts">
                    <div class="left">
                      订单押金
                      <span>!</span>
                    </div>
                    <div class="right" @click="showDiscounts">
                      ￥100
                      <img src="">
                    </div>
                </div>-->
                <!-- <div class="quota" v-if="orderData.max_sale_num !== 0 ||	orderData.min_sale_num !== 0">
                  <div class="tag">限购</div>
                  <div class="depict">
                    <span v-if="orderData.min_sale_num !== 0">最低限购{{ orderData.min_sale_num }}件</span>
                    <span v-if="!(orderData.max_sale_num === 0) && !(orderData.min_sale_num === 0)">，</span>
                    <span v-if="orderData.max_sale_num !== 0">最高限购{{ orderData.max_sale_num }}件</span>
                  </div>
                </div> -->
            </div>
            <div class="total">
                <div>共{{ orderData.quantity }}件</div>
                <div> 总计：</div>
                <div>￥</div>
                <div>{{ orderData.now_price }}</div>
            </div>
        </div>
        <ul class="specification">
            <li>
                <div class="box">
                    <div class="left">购买数量</div>
                    <div class="right">
                        <van-stepper
                                input-width="60px"
                                :min="min"
                                :max="max"
                                v-model="buyNum"
                                :async-change="true"
                                @change="changeNum"
                                :integer="true"
                                @focus="focus"
                                :disabled="disabled"
                        />
                    </div>
                </div>
            </li>
            <li>
                <div class="boxs">
                    <div class="left">备注</div>
                    <van-field
                            v-model="message"
                            rows="1"
                            autosize
                            type="textarea"
                            maxlength="50"
                            placeholder="特殊需求请和卖家协商一致"
                            class="inp"
                            @focus="focus"
                            :disabled="disabled"
                    />
                    <div class="textNum">
                        <span>{{ textNum }}</span>/50
                    </div>
                </div>
            </li>
        </ul>
        <ul class="payAway">
            <li class="have" v-for="(item, index) in orderData.channel_list" :key="index"
                @click="changePay(index, item.class_name, item.channel_id)">
                <div class="left">
                    <img v-if="item.class_name === 'alipay'" src="@/assets/images/pubilc/alipay.png" alt/>
                    <img v-if="item.class_name === 'wxpay'" src="@/assets/images/pubilc/wxpay.png" alt/>
                    <img v-if="item.class_name === 'ggpay'" src="@/assets/images/pubilc/balance.png" alt/>
                    <span v-if="item.class_name !== 'ggpay'">
            {{ item.channel_name }}
          </span>
                    <span v-if="item.class_name === 'ggpay'"
                          :style="{ color: Number(orderData.validate_balance) < orderData.now_price ? '#878787' : '#1E1E1E' }">{{ item.channel_name }}</span>
                    <span v-if="item.class_name === 'ggpay'"
                          :style="{ color:	Number(orderData.validate_balance) < orderData.now_price ? '#878787' : '#1E1E1E' }"
                    >(￥{{ orderData.validate_balance }}元)</span>
                </div>
                <div class="right">
                    <div v-if="item.class_name !== 'ggpay'">
                        <div class="chioce" :class="{ active: curred === index }">
                            <img v-if="curred === index" src="@/assets/images/pubilc/ico_dui.png" alt/>
                        </div>

                    </div>
                    <div v-if="item.class_name === 'ggpay'">
                        <div class="chioce" :class="{ active: curred === index }"
                             v-if="Number(orderData.validate_balance) >= orderData.now_price">
                            <img v-if="curred === index" src="@/assets/images/pubilc/ico_dui.png" alt/>
                        </div>
                        <div v-if="Number(orderData.validate_balance) < orderData.now_price">余额不足</div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="first" v-if="next_discount !== null"></div>
        <div class="second" v-if="next_discount === null"></div>
        <div class="footer" v-show="hidshow">
            <div class="top" v-if="next_discount !== null">
        <span v-if="next_discount.discount_type === 1">
          再购买<span style="color: #FF3432">{{ next_discount.diff }}</span>{{ next_discount.condition_type === 1 ? "元" : "件" }}立即优惠{{ next_discount.reduce }}元
        </span>
                <span v-if="next_discount.discount_type === 2">
          再购买<span style="color: #FF3432">{{ next_discount.diff }}</span>{{ next_discount.condition_type === 1 ? "元" : "件"}}赠送{{ next_discount.reduce }}件
        </span>
                <span v-if="next_discount.discount_type === 3">
          再购买<span style="color: #FF3432">{{ next_discount.diff }}</span>{{ next_discount.condition_type === 1 ? "元" : "件" }}立享{{ next_discount.reduce }}折
        </span>
            </div>
            <div class="left">
                <div class="total">
                    <span>总计：</span>
                    <span>￥</span>
                    <span>{{ orderData.now_price }}</span>
                </div>
                <div class="discounts">已优惠 {{ orderData.total_reduce_price }}元</div>
            </div>
            <div class="right">
                <van-button color="#FFDD07" class="submit" @click="orderSubmit">提交订单</van-button>
            </div>
        </div>
        <van-popup v-model="show" round position="bottom" :style="{ height: '70%' }">
            <div class="discountss">
                <div class="title">购满{{ type === 1 ? '减' : type === 2 ? '送' : '折' }}优惠</div>
                <div class="dces">此商品设置了购满{{ type === 1 ? '减' : type === 2 ? '送' : '折' }}优惠，满足条件即可获得相应优惠：</div>
                <ul>
                    <li v-for="(item, index) in discounts" :key="index">
                        <div class="left">
                            <span>{{ index + 1 }}.</span>
                            <div>
                                购满{{ item.condition_num}}{{ item.condition_type === 1 ? "元" : "件"}}，{{
                                item.discount_type === 1 ? "立减" : item.discount_type === 2 ? "赠送" : '立享' }}{{
                                item.discount_value }}{{ item.condition_type === 1 ? "元" : item.discount_type === 2 ?
                                "件" : '折'}}
                            </div>
                        </div>
                        <div class="right">
                            <div class="chioce" :class="{ active: item.now_discount }">
                                <img v-if="item.now_discount" src="@/assets/images/pubilc/dui.png" alt/>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </van-popup>
        <div class="loginin">
            <van-popup
                    v-model="showLogin"
                    :close-on-click-overlay="false"
            >
                <Login v-if="showLogin" @getSmsCode="getSmsCode" @userlogin="userLogin" @closelogin="toLogin"></Login>
            </van-popup>
        </div>
        <div class="show_sure_box">
            <van-popup v-model="showSure" :close-on-click-overlay="false">
                <div class="show_sure">
                    <div class="title">支付提示</div>
                    <div class="desc">确定使用余额支付？</div>
                    <div class="btn">
                        <van-button class="cancel" color="#E2E2E2" @click="payCancel">取消</van-button>
                        <van-button class="cancel sure" color="#FFDD07" @click="paySure">确定</van-button>
                    </div>
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script>
  import Login from "../../components/login/login"; //注册登录页面
  import {
    confirmOrder,
    getSms,
    userLogin,
    computedPirce,
    buildOrder,
    payType
  } from "@/api/index";
  import store from "../../store";
  import {Toast, Dialog} from "vant"
  import {clearKeepAlive} from '@/api/clear'

  export default {
    data() {
      // let id = stroe.state.user_envelope_id
      return {
        par: {},
        showSure: false,
        loading: true,
        showLogin: false,
        curred: 0, // 选择的支付方式
        value: 1100,
        message: "",
        buyNum: 1,
        show: false,
        orderData: {},
        shopInfo: {},
        discounts: [],
        envelope: {},
        valid: {},
        goodsInfo: {},
        discount_type: null,
        next_discount: null,
        condition_num: null,
        channel_id: null,
        type: null,
        isBanlace: false,
        value1: 1,
        stock: null,
        yes: false,
        max: Infinity,
        min: 1,
        docmHeight: document.documentElement.clientHeight, //默认屏幕高度
        showHeight: document.documentElement.clientHeight, //实时屏幕高度
        hidshow: true, //显示或者隐藏footer,
        disabled: false,
        loadingObj: {},
        timer: null,
        timed: false,
      };
    },
    components: {
      Login,
    },
    beforeRouteLeave(to, from, next) {
      if (to.meta.isBack) {
        from.meta.keepAlive = true
      } else {
        from.meta.keepAlive = false
        clearKeepAlive(this)
      }
      next();
    },
    computed: {
      textNum() {
        return this.message.length;
      },
      user_envelope_id() {
        return store.state.user_envelope_id;
      },
    },
    watch: {
      user_envelope_id() {
        this.valid.filter((item) => {
          if (this.user_envelope_id === item.user_envelope_id) {
            this.condition_num = Number(item.envelopes.condition_num);
          }
        });
        this.computedOrderPirce();
      },
      buyNum() {
        this.computedOrderPirce();
      }
    },
    created() {
      this.loadingObj = Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 10000
      })
      this.goodsInfo = this.$route.query;
      localStorage.setItem("params", JSON.stringify(this.goodsInfo));
      this.$cookies.set('params', JSON.stringify(this.goodsInfo))
      this.buyNum = Number(this.goodsInfo.quantity);
      this.getData();
    },
    destroyed() {
      store.dispatch('async_change_user_envelope_id', null)
    },
    methods: {
      getPayInfo (url) {
        payType(url).then(res => {
          if (res.code === 66000) {
            if (res.data.pay_status === 1) {
              // localStorage.setItem('detailUrl', res.data.h5_detail_api)
              Toast('支付成功')
              clearTimeout(this.timer)
              this.$cookies.remove('order')
              setTimeout(() => {
                this.$router.replace({path: '/orderDetails', query: {url: res.data.h5_detail_api}})
              }, 1500)
            } else {
              this.time = res.data.pay_count_down * 1000
            }
            if (this.time === 0) {
              Toast('支付超时')
              this.timed = true
              clearTimeout(this.timer)
            }
          }
        })
      },
      goBack() {
        this.$router.go(-1)
      },
      paySure() {
        this.showSure = false
        Toast.loading({
          message: "下单中",
          forbidClick: true,
          duration: 0,
        });
        buildOrder(this.par)
          .then((res) => {
            if (res.code === 0) {
              Toast.clear();
              Toast.success('下单成功')
              setTimeout(() => {
                this.$router.replace({
                  path: "/orderDetails",
                  query: {
                    url: res.data.order.h5_detail_api,
                  },
                });
                Toast.clear()
              }, 1000);

            }
          })
          .catch((err) => {
            Toast.clear()
            if (err.code === 50000 || err.code === 50107 || err.code === 50108 || err.code === 50113) {
              this.showLogin = true;
            } else {
              Toast(err.msg)
              setTimeout(() => {
                Toast.clear()
              }, 600)
            }
          });
      },
      payCancel() {
        this.showSure = false
        setTimeout(() => {
          Toast("已取消支付");
        }, 200);
      },
      listen(i) {

        const newInnerHeight = window.innerHeight;
        Toast(i + 'asdas' + newInnerHeight)
        if (i > newInnerHeight) {
          // 键盘弹出事件处理
          this.hidshow = false
        } else {
          // 键盘收起事件处理

          this.hidshow = true


          this.disabled = true
          setTimeout(() => {
            this.disabled = false
          }, 100)
          // this.showHeight = this.showHeight - 1
        }

      },
      focus() {
        let _this = this
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isAndroid) {
          const innerHeight = window.innerHeight;
          window.addEventListener('resize', focusoutFunc)
          let copyFocusoutFunc = focusoutFunc

          function focusoutFunc() {
            const newInnerHeight = window.innerHeight;
            if (innerHeight > newInnerHeight) {
              // 键盘弹出事件处理
              _this.hidshow = false
            } else {
              // 键盘收起事件处理
              _this.hidshow = true
              _this.disabled = true
              _this.computedOrderPirce();
              setTimeout(() => {
                _this.disabled = false
              }, 100)
              // Toast('执行了')
              window.removeEventListener('resize', copyFocusoutFunc, false)
            }
          }
        }
      },
      toLogin(showLogin) {
        this.$router.go(-1)
      },
      // 订单提交
      orderSubmit() {
        let params = {
          order_num: this.orderData.order_num,
          goods_id: Number(this.goodsInfo.goods_id),
          buy_count: this.orderData.old_quantity,
          user_remark: this.message,
          pay_type: this.channel_id,
          anonymos: 0,
        };
        if (this.orderData.envelope !== null) {
          params.envelope_id =
            this.orderData.envelope.user_envelope_id || 0;
        } else {
          params.envelope_id = 0;
        }
        params.goods_spec_id = this.goodsInfo.goods_spec_id || 0;
        params.promotion_user_id = this.goodsInfo.promotion_user_id || null;
        params.promotion_sign = this.goodsInfo.sign || null;

        // localStorage.removeItem("order");
        if (this.isBanlace === true) {
          if (
            Number(this.orderData.validate_balance) >=
            this.orderData.now_price
          ) {
            this.par = params
            this.showSure = true
            // 弹出框是否确认使用余额支付
            // Dialog.confirm({
            // 	title: "支付",
            // 	message: "确定使用余额支付？",
            // })
            // 	.then(() => {

            // 	})
            // 	.catch(() => {
            // 		setTimeout(() => {
            // 			Toast("已取消支付");
            // 		}, 100);
            // 	});
          } else {
            Toast("余额不足，请选择其他方式");
          }
        } else {
          Toast.loading({
            message: "下单中",
            forbidClick: true,
            duration: 0,
          });
          buildOrder(params)
            .then((res) => {
              if (res.code === 0) {
                Toast.clear();
                localStorage.setItem(
                  "order",
                  JSON.stringify(res.data)
                );
                this.$cookies.set('order', JSON.stringify(res.data))
                Toast.success({
                  message: "下单成功!",
                  duration: 1000,
                  forbidClick: true,
                });
                this.timer = setInterval(() => {
                  this.getPayInfo(res.data.order.pay_status_api)
                }, 3000)
                if (res.data.extra.type === 4) {
                  window.location.href = res.data.qrcode
                } else {
                  setTimeout(() => {
                    this.$router.replace({
                      path: "/scanToPay",
                      query: {
                        type: res.data.order.channel_type,
                      },
                    });
                  }, 1000);

                }
              }
            })
            .catch((err) => {
              Toast.clear();
              if (err.code === 50000 || err.code === 50107 || err.code === 50108 || err.code === 50113) {
                this.showLogin = true;
              }
            });
        }
      },
      getSmsCode(tel) {
        getSms({phone: Number(tel), event: "login"}).then((res) => {
        });
      },
      // login 组件回调  用户手机号登录
      userLogin(params) {
        userLogin(params).then((res) => {
          this.$cookies.set('Token', res.data.authorization)
          this.$router.go(0);
        });
      },
      // 改变优惠券或者数量时触发
      computedOrderPirce() {
        let params = {
          goods_id: Number(this.goodsInfo.goods_id),
          quantity: this.buyNum,
          envelope_id: this.user_envelope_id,
          order_id: 0,
          auto_use_envelope: 1,
        };
        if (this.condition_num !== null) {
          if (this.condition_num > (Number(this.orderData.now_price))) {
            params.envelope_id = "";
            params.auto_use_envelope = 1
          }
        }
        if (this.goodsInfo.goods_spec_id) {
          params.goods_spec_id = Number(this.goodsInfo.goods_spec_id);
        }
        if (this.user_envelope_id === -1) {
          params.envelope_id = "";
          params.auto_use_envelope = 0
        }
        computedPirce(params)
          .then((res) => {
            Toast.clear();
            Object.assign(this.orderData, res.data);
            this.valid = this.orderData.all_envelope.valid;
            this.discounts = this.orderData.discounts;
            this.next_discount = this.orderData.next_discount;
            if (this.orderData.discounts.length !== 0) {
              this.type = this.discounts[0].discount_type
              let arr = this.orderData.discounts.filter((item) => {
                if (item.now_discount) {
                  this.discount_type = item;
                }
                return item.now_discount;
              });
              if (arr.length === 0) {
                this.discount_type = null;
              }
            }
            this.$store.dispatch(
              "async_change_all_envelope",
              res.data.all_envelope
            );
          })
          .catch((err) => {
            Toast.clear();
            if (err.code === 50000 || err.code === 50107 || err.code === 50108 || err.code === 50113) {
              this.showLogin = true;
            } else {
              Toast(err.msg);
            }
          });
      },
      // 更改数量
      changeNum(val) {
        if (val > this.max) {
          this.buyNum = this.max
        } else if (val < this.min) {
          this.buyNum = this.min;
        }
        // this.computedOrderPirce();


      },
      getData() {
        let params = this.$route.query;
        params.goods_id = Number(params.goods_id);
        params.goods_spec_id ? (params.goods_spec_id = Number(params.goods_spec_id)) : null
        params.quantity = Number(params.quantity)
        params.rent_plan = 0;
        confirmOrder(params)
          .then((res) => {

            this.orderData = res.data;
            this.channel_id = this.orderData.channel_list[this.curred].channel_id;
            this.loading = false
            this.orderData.channel_list.forEach((item, index) => {
              if (item.class_name === 'ggpay') {
                if (Number(this.orderData.validate_balance) > this.orderData.now_price) {
                  this.curred = index;
                  this.channel_id = item.channel_id;
                }
              }
            })
            if (this.orderData.channel_list[this.curred].class_name === "ggpay") {
              this.isBanlace = true;
            }
            this.shopInfo = res.data.seller;
            this.discounts = this.orderData.discounts;
            this.envelope = res.data.envelope;
            this.valid = this.orderData.all_envelope.valid;
            this.stock = this.orderData.stock;
            this.next_discount = this.orderData.next_discount;
            this.orderData.min_sale_num === 0
              ? (this.min = 1)
              : (this.min = this.orderData.min_sale_num);
            if (this.orderData.max_sale_num === 0) {
              this.max = this.stock;
            } else {
              this.orderData.max_sale_num >= this.stock
                ? (this.max = this.stock)
                : (this.max = this.orderData.max_sale_num);
            }
            this.$store.dispatch(
              "async_change_all_envelope",
              res.data.all_envelope
            );
            if (this.orderData.discounts.length !== 0) {
              this.type = this.discounts[0].discount_type
              this.orderData.discounts.forEach((item) => {
                if (item.now_discount) {
                  this.discount_type = item;
                }
              });
            }
            this.loadingObj.clear()
          })
          .catch((err) => {
            this.loadingObj.clear()
            if (
              err.code === 50000 ||
              err.code === 50107 ||
              err.code === 50108 ||
              err.code === 50113
            ) {
              if (err.code === 5000) {
              }
              this.showLogin = true;
            }
          });
      },
      changePay(index, name, id) {
        if (name == "ggpay") {
          if (Number(this.orderData.validate_balance) >= this.orderData.now_price) {
            this.curred = index;
            this.channel_id = id;
            this.isBanlace = true;
          } else {
            Toast("余额不足");
          }
        } else {
          this.curred = index;
          this.channel_id = id;
          this.isBanlace = false;
        }
      },
      goUsePacket() {
        this.$router.push({
          path: "/usePacket",
          params: this.orderData.all_envelope,
        });
      },
      noHavePacket() {
        Toast('暂无可用红包')
      },
      showDiscounts() {
        this.show = true;
      },
      close() {
      }
    },
  };
</script>

<style lang="scss">
    .inp.van-cell {
        width: 80% !important;
        flex: 1;
        padding: 13px 10px 13px 10px;
    }

    .boxs {
        .left {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
        }

        .van-field__control {
            font-size: 14px !important;
        }
    }

    .loginin {
        .van-popup {
            border-radius: 9px;
            top: 43%;
        }
    }

    .show_sure_box {
        .van-popup {
            border-radius: 10px;
        }
    }

    .right {
        .van-stepper__minus--disabled,
        .van-stepper__plus--disabled {
            background: #ffffff;
            // margin-right: -1px;
        }

        .van-stepper__minus,
        .van-stepper__plus {
            background: #ffffff;
            // margin-left: -1px;
        }

        .van-stepper__plus::after {
            width: 2px;
        }

        .van-stepper__minus::before,
        .van-stepper__plus::before {
            height: 2px;
        }

        .van-stepper__input {
            font-weight: 600;
            font-size: 14px !important;
            color: #2f2f2f;
            height: 25px;
            border-radius: 4px;
        }
    }
</style>
<style lang="scss" scoped>
    .show_sure_box {
        overflow: hidden;

        .show_sure {
            width: 285px;
            height: 160px;
            text-align: center;
            padding: 23px 18px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .title {
                font-size: 17px;
                color: #000000;
                font-weight: bold;
            }

            .desc {
                font-size: 13px;
                flex: 1;
                padding-top: 13px;
                color: #666666;
            }

            .btn {
                display: flex;
                justify-content: space-between;

                .cancel {
                    width: 112px;
                    height: 40px;
                    color: #2F2F2F !important;
                    border-radius: 40px;
                }
            }
        }
    }

    .header {
        height: 46px;
        display: flex;
        align-items: center;
        position: relative;
        background: #ffffff;
        width: 100%;

        .left {
            height: 45px;
            width: 47px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 0;
            top: 0;

            img {
                width: 17px;
                height: 17px;
            }
        }

        .title {
            font-size: 15px;
            font-weight: 600 !important;
            line-height: 46px;
            width: 100%;
            text-align: center;
            color: #1e1e1e;
        }
    }

    .price {
        height: 45px;
    }

    .orderInfo {
        width: 351px;
        margin: 0 auto;
        background: #ffffff;
        box-sizing: border-box;
        padding: 11px 15px 0px;
        margin-top: 10px;
        border-radius: 4px;

        .shop {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 15px;
            position: relative;
            color: rgba(30, 30, 30, 1);
            line-height: 22px;

            .headImg {
                border-radius: 50%;
                width: 22px;
                height: 22px;
                margin-right: 7px;
            }

            .turnRight {
                width: 14px;
                height: 14px;
                margin-left: 4px;
            }
        }

        .shop::before {
            content: '';
            width: 327px;
            height: 0.5px;
            background-color: #F5F5F5;
            position: absolute;
            bottom: -13px;
        }

        .goodsInfo {
            display: flex;
            position: relative;
            justify-content: space-between;
            margin: 24px 0 10px;

            .left {
                margin-right: 14px;

                img {
                    width: 90px;
                    height: 90px;
                    display: block;
                    border-radius: 4px;
                }
            }

            .right {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-top: -4px;
                padding-bottom: 5px;

                .decipher {
                    font-size: 14px;
                    color: rgba(30, 30, 30, 1);

                    .tag {
                        font-weight: 600;

                        font-size: 10px;
                        width: 48px;
                        height: 16px;
                        background: #FFDD07;
                        border-radius: 3px;
                        color: #2F2F2F;
                        padding: 1px 4px;
                        margin-right: 5px;
                    }

                    .dec_name {
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-box-pack: center;
                        -webkit-box-align: left;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        letter-spacing: -0.5px;
                        line-height: 20px;
                    }
                }

                .size {
                    font-size: 12px;
                    color: #999999;
                    margin-top: 6px;
                    font-weight: 400;
                    background: #fff;
                }

                .price {
                    font-weight: 400;
                    font-size: 12px;
                    color: #1e1e1e;
                    height: 24px;
                    display: flex;
                    align-items: flex-end;

                    span:nth-child(2) {
                        font-size: 18px;
                        margin-bottom: -3px;
                    }
                }
            }
        }

        .ruleInfo {
            padding: 6px 0;
            position: relative;

            .discounts {
                height: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left {
                    font-size: 14px;
                    font-weight: 400;
                    display: flex;
                    align-items: center;

                    img {
                        width: 12px;
                        height: 12px;
                        margin-right: 6px;
                        display: block;
                    }

                    span {
                        display: block;
                        width: 10px;
                        height: 10px;
                        line-height: 9px;
                        font-size: 8px;
                        background: #ff4f11;
                        color: #ffffff;
                        text-align: center;
                        border-radius: 50%;
                        font-weight: 800;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin: 1px 0 0 6px;
                    }
                }

                .right {
                    display: flex;
                    align-items: center;
                    text-align: right;
                    color: #999999;
                    font-size: 12px;
                    font-weight: 400;

                    img {
                        width: 5px;
                        height: 8px;
                        margin-left: 10px;
                    }

                    .dis_right {
                        line-height: 10px;
                    }
                }

                .rights {
                    display: flex;
                    align-items: center;

                    div:nth-child(1) {
                        font-size: 12px;
                        margin-top: 4px;
                    }

                    div:nth-child(2) {
                        font-size: 16px;
                        // margin-top: -3px;
                    }

                    img {
                        width: 5px;
                        height: 8px;
                        margin-left: 10px;
                    }
                }
            }

            .quota {
                display: flex;
                justify-content: flex-start;
                height: 50px;
                align-items: center;

                .tag {
                    background: #fee0e0;
                    width: 35px;
                    line-height: 18px;
                    font-size: 10px;
                    text-align: center;
                    height: 18px;
                    color: #ff3432;
                    border-radius: 2px;
                    margin-right: 8px;
                }

                .depict {
                    color: #979797;
                }
            }
        }

        .ruleInfo::before {
            content: '';
            width: 351px;
            // height: 0.5px;
            background: rgba(243, 243, 243, 1);
            position: absolute;
            bottom: 0;
            left: -15px;
        }

        .total {
            height: 40px;
            font-size: 12px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-top: 4px;
            padding-bottom: 4px;

            div:nth-child(1) {
                color: #1e1e1e;
                margin-right: 4px;
            }

            div:nth-child(2) {
                color: #1e1e1e;
            }

            div:nth-child(3) {
                color: #FF4F11;
                margin-top: 1px;
                font-weight: 600;
            }

            div:nth-child(4) {
                color: #FF4F11;
                font-size: 18px;
                line-height: 18px;
                margin-bottom: 3px;
                font-weight: 600;
            }
        }
    }

    .specification {
        li {
            width: 351px;
            margin: 0 auto;
            background: #ffffff;
            margin-top: 10px;
            border-radius: 4px;
            padding: 0 15px;
            box-sizing: border-box;

            .box {
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left {
                    color: #1e1e1e;
                    font-size: 14px;
                    font-weight: 400;
                }

                .right {
                    display: flex;
                    align-items: center;
                    color: #ff3432;
                    position: relative;

                    div:nth-child(1) {
                        font-size: 12px;
                        // margin-top: 4px;
                    }

                    div:nth-child(2) {
                        font-size: 16px;
                        // margin-top: -3px;
                    }

                    img {
                        width: 5px;
                        height: 8px;
                        margin-left: 10px;
                    }
                }

                .inp {
                    width: 260px !important;
                }
            }

            .boxs {
                display: flex;
                justify-content: space-between;

                .left {
                    line-height: 50px;
                }

                .textNum {
                    font-size: 12px;
                    line-height: 50px;
                    color: #999999;

                    span {
                        color: #ff9190;
                    }
                }
            }
        }
    }

    .payAway {
        background: #ffffff;
        border-radius: 4px;
        width: 351px;
        margin: 10px auto 0;
        padding: 0 15px;

        .have {
            width: 100%;
            height: 54px;
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            color: #1e1e1e;
            border-bottom: 0.5px solid rgba(245, 245, 245, 1);

            .left {
                display: flex;
                align-items: center;
                font-size: 14px;
                font-weight: 400;

                img {
                    width: 30px;
                    height: 30px;
                    margin-right: 8px;
                }
            }

            .right {
                color: #979797;
                font-size: 14px;
                border-radius: 50%;
                .chioce {
                    border: 2px solid #E2E2E2;
                    width: 18px;
                    height: 18px;
                    border-radius: 50%;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        margin-top: 2px;
                        width: 18px;
                        height: 18px;
                    }
                }

                .active {
                    border: none;
                    background: #FFDD07;
                    transition: all 0.3s;
                    border: none;
                }
            }
        }
    }

    .first {
        height: 120px;
    }

    .second {
        height: 100px;
    }

    .footer {
        width: 100%;
        max-width: 10rem;
        border-top: 0.5px solid #f3f3f3;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        bottom: 0;
        background: #ffffff;
        padding: 8px 15px;

        box-sizing: border-box;
        z-index: 50;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);

        .top {
            position: absolute;
            width: 100%;
            height: 34px;
            top: -34px;
            left: 0;
            font-size: 14px;
            background: #FFFAE8;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FF4F11;
            font-weight: 400;

        }

        .left {
            margin-bottom: 8px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .total {
                font-size: 14px;

                span:nth-child(2) {
                    font-size: 14px;
                    color: #ff3432;
                }

                span:nth-child(3) {
                    font-weight: 800;
                    color: #ff3432;
                    font-size: 14px;
                }
            }

            .discounts {
                color: #878787;
                font-size: 14px;
            }
        }

        .right {
            margin-bottom: 8px;

            .submit {
                font-weight: 600;
                width: 130px;
                height: 46px;
                border-radius: 28px;
                color: #2F2F2F !important;
            }
        }
    }

    .discountss {
        border-radius: 4px;
        overflow: hidden;
        padding: 0 28px;

        .title {
            font-size: 18px;
            font-weight: 600;
            margin: 24px auto;
            text-align: center;
        }

        .dces {
            font-size: 14px;
            color: #676767;
        }

        ul {
            margin-top: 10px;

            li {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left {
                    display: flex;
                    font-size: 14px;
                    height: 30px;
                    align-items: center;
                    color: #1e1e1e;

                    span {
                        color: #676767;
                    }
                }

                .right {
                    margin-right: 20px;

                    .div {
                        display: flex;
                        align-items: center;
                    }

                    .chioce {
                        // border: 2px solid #E2E2E2;
                        border-radius: 50%;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 20px;
                        width: 20px;

                        img {
                            width: 12px;
                            height: 12px;
                        }
                    }

                    .active {
                        border: none;
                        background: #FFDD07;
                    }
                }
            }
        }
    }
</style>
